@use 'sass:map';

@use 'config';
@use 'function' as *;
@use '../common/var' as *;


@mixin set-css-var-value($name, $value) {
  #{joinVarName($name)}: #{$value};
}


@mixin set-css-var-type($name, $type, $variables) {
  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}

@mixin set-css-color-type($colors, $type) {
  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));

  @each $i in (3, 5, 7, 8, 9) {
    @include set-css-var-value(('color', $type, 'light', $i), map.get($colors, $type, 'light-#{$i}'));
  }

  @include set-css-var-value(('color', $type, 'dark-2'), map.get($colors, $type, 'dark-2'));
}


// 设置 body 的 css 变量
@mixin set-root-css-vars($name, $variables) {
  :root {
    @include set-component-css-var($name, $variables);
  }
}


@mixin set-component-css-var($name, $variables) {
  @each $attribute, $value in $variables {
    @if $attribute == 'default' {
      #{getCssVarName($name)}: #{$value};
    } @else {
      #{getCssVarName($name, $attribute)}: #{$value};
    }
  }
}

@mixin set-css-color-rgb($type) {
  $color: map.get($colors, $type, 'base');
  @include set-css-var-value(('color', $type, 'rgb'), #{red($color), green($color), blue($color)});
}


@mixin css-var-from-global($var, $gVar) {
  $varName: joinVarName($var);
  $gVarName: joinVarName($gVar);
  #{$varName}: var(#{$gVarName});
}
